<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>新增群发消息</title>
<link href="${ctx}/jeasyui-extensions/plugins/uploadify/uploadify.css"
	rel="stylesheet">
<link
	href="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/themes/default/css/ueditor.css"
	rel="stylesheet">
<script type="text/javascript"
	src="${ctx}/jeasyui-extensions/plugins/uploadify/jquery.uploadify.js"></script>
<script type="text/javascript"
	src="${ctx}/jeasyui-extensions/jeasyui-extensions/jquery-easyui-euploadify/jquery.euploadify.js"></script>
<script type="text/javascript"
	src="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/ueditor.config.js"></script>
<script type="text/javascript"
	src="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/ueditor.all.js"></script>
<script type="text/javascript"
	src="${ctx}/jeasyui-extensions/plugins/ueditor/ue1_4_3-utf8-net/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript"
	src="${ctx}/jeasyui-extensions/jeasyui-extensions/jquery-easyui-ueditor/jquery.ueditor.js"></script>
<script
	src="${ctx}/static/selectWin/appSelector.js?version=${applicationScope.jsVersion }"
	type="text/javascript"></script>
<script type="text/javascript">
	var newsImageId, voiceNameId, imageNameId, videoNameId;
	var n = 0, m = 1;//n用于存储当前图文消息的输入框的Id编号，m用于存储图文消息的总个数
	var value = [ {
		"id" : "text",
		"value" : "文本消息"
	}, {
		"id" : "mpnews",
		"value" : "图文消息"
	}, {
		"id" : "voice",
		"value" : "声音消息"
	}, {
		"id" : "image",
		"value" : "图片消息"
	}, {
		"id" : "mpvideo",
		"value" : "视频消息"
	} ];
	$(function() {
		$("#tt").toolbar("align", "right");
		$("#wxUserSelector").click(function() {
			if ($("#appId").comboselector("getValue") == "" || $("#appId").comboselector("getValue") == null) {
				showInfo("请先选择发送消息的公众账号!");
				return false;
			}
			var appId = $("#appId").comboselector("getValue");
			$.easyui.importor.treeSelector({
				url : "${ctx}/wx/sendMessages/tree/" + appId,
				multiple : true,
				singleSelect : true,
				fitColumns : true,
				checkbox : true,
				cascadeCheck : true,
				onEnter : function(nodes) {
					var str1 = "", str2 = "";
					if (nodes != null && nodes.length > 0) {
						for (var i = 0; i < nodes.length; i++) {
							if (nodes[i].id && nodes[i].pid != null) {
								if (str1 != "" && i < nodes.length) {
									str1 += ",";
									str2 += ",";
								}
								str1 += nodes[i].id;
								str2 += nodes[i].text;
							}
						}
					}
					$("#usersId").val(str1);
					$("#usersName").val(str2);
				}
			});
		});
		$("#appId").comboselector(appSelectOpts);
		$("#edit").click(function() {
			if ($("#appId").comboselector("getValue") == "") {
				showInfo("发送信息的公共账号不能为空！");
				return false;
			}
			if ($("#userId").val() == "") {
				showInfo("接受信息的用户不能为空！");
				return false;
			}
			if ($("#msgType").combobox("getValue") == "") {
				showInfo("信息类型不能为空！");
				return false;
			}
			$("#msgNumber").val(m);
			$("#fm").form("submit", {
				url : "${ctx}/wx/sendMessages/sendMessages",
				success : function(data) {
					showInfo(data.msg);
					if (data.success) {
						window.location.href = "${ctx}/wx/sendMessages";
						$.easyui.loading({
							msg : "界面刷新..."
						});
					}
				}
			});
		});
		$("#msgType").combobox({
			valueField : 'id',
			textField : 'value',
			data : value
		});
		$(".textMsg").show();
		$(".newsMsg0").hide();
		$(".voiceMsg").hide();
		$(".imageMsg").hide();
		$(".videoMsg").hide();
		$(".buttons").hide();
		$("#newsImage0").euploadify({
			width : 875,
			multiTemplate : 'simple',
			multi : true,
			auto : false,
			showStop : true,
			showCancel : true,
			'fileTypeExts' : '*.jpg',
			'queueSizeLimit' : 1,// 上传队列中所允许的文件数量
			'simUploadLimit' : 1,// 允许同时上传的文件数量
			swf : '${ctx }/static/uploadify/uploadify.swf',
			uploader : '${ctx }/basic/basicFile/upload',
			onUploadSuccess : function(file, data, response) {
				var obj = eval('(' + data + ')');
				$("#newsImageId0").val(obj.obj.id);
			}
		});
		$("#voiceName").euploadify({
			width : 875,
			multiTemplate : 'simple',
			multi : true,
			auto : false,
			showStop : true,
			showCancel : true,
			'fileTypeExts' : '*.mp3',
			'queueSizeLimit' : 1,// 上传队列中所允许的文件数量
			'simUploadLimit' : 1,// 允许同时上传的文件数量
			swf : '${ctx }/static/uploadify/uploadify.swf',
			uploader : '${ctx }/basic/basicFile/upload',
			onUploadSuccess : function(file, data, response) {
				var obj = eval('(' + data + ')');
				$("#voiceNameId").val(obj.obj.id);
			}
		});
		$("#imageName").euploadify({
			width : 875,
			multiTemplate : 'simple',
			multi : true,
			auto : false,
			showStop : true,
			showCancel : true,
			'fileTypeExts' : '*.jpg',
			'queueSizeLimit' : 1,// 上传队列中所允许的文件数量
			'simUploadLimit' : 1,// 允许同时上传的文件数量
			swf : '${ctx }/static/uploadify/uploadify.swf',
			uploader : '${ctx }/basic/basicFile/upload',
			onUploadSuccess : function(file, data, response) {
				var obj = eval('(' + data + ')');
				$("#imageNameId").val(obj.obj.id);
			}
		});
		$("#videoName").euploadify({
			width : 875,
			multiTemplate : 'simple',
			multi : true,
			auto : false,
			'fileTypeExts' : '*.mp4',
			'queueSizeLimit' : 1,// 上传队列中所允许的文件数量
			'simUploadLimit' : 1,// 允许同时上传的文件数量
			showStop : true,
			showCancel : true,
			swf : '${ctx }/static/uploadify/uploadify.swf',
			uploader : '${ctx }/basic/basicFile/upload',
			onUploadSuccess : function(file, data, response) {
				var obj = eval('(' + data + ')');
				$("#videoNameId").val(obj.obj.id);
			}
		});
		//*****************************************************************图文信息显示处理**************************************************
		$("#beforeAll").click(function() {
			if (n == 0) {
				showInfo("当前为封面页，不能跳转");
			} else {
				$(".newsMsg" + n).hide();
				n = 0;
				$(".newsMsg0").show();
			}
		});
		$("#beforeOne").click(function() {
			if (n == 0) {
				showInfo("当前为封面页，不能跳转");
			} else {
				$(".newsMsg" + n).hide();
				n = n - 1;
				$(".newsMsg" + n).show();
			}
		});
		$("#behindOne").click(function() {
			if (n == (m - 1)) {
				showInfo("当前为最后一页，不能跳转");
			} else {
				$(".newsMsg" + n).hide();
				n = n + 1;
				$(".newsMsg" + n).show();
			}
		});
		$("#behindAll").click(function() {
			if (n == (m - 1)) {
				showInfo("当前为最后一页，不能跳转");
			} else {
				$(".newsMsg" + n).hide();
				n = m - 1;
				$(".newsMsg" + n).show();
			}
		});
		$("#addOne")
				.click(
						function() {
							if ($("#newsImageId" + n).val() == "" || $("#newsTitle" + n).val() == ""
									|| $("#newsContent" + n).ueditor("getValue") == "") {
								showInfo("当前页尚未编辑完成，不能新增页");
							} else {
								$(".newsMsg" + n).hide();
								n++;
								m++;
								var tr1 = $('<tr class="newsMsg'+n+'"><td>第'
										+ m
										+ '消息标题：</td><td><input id="newsTitle'+n+'" name="newsTitle'+n+'" style="width: 875px"></td></tr>');
								var tr2 = $('<tr class="newsMsg'+n+'"><td>消息作者：</td><td><input name="newsEditor'+n+'" style="width: 875px"></td></tr>');
								var tr3 = $('<tr class="newsMsg'+n+'"><td>封面图片：</td><td height="50px"><input id="newsImage'+n+'" name="newsImage'+n+'" type="text" /><input id="newsImageId'+n+'" name="newsImageId'+n+'" type="hidden" /></td></tr>');
								var tr4 = $('<tr class="newsMsg'+n+'"><td></td><td><input id="showCoverPic'+n+'" name="showCoverPic'+n+'" type="checkbox"><label for="showCoverPic'+n+'">是否将封面显示与正文顶部</label></td></tr>');
								var tr5 = $('<tr class="newsMsg'+n+'"><td>消息内容：</td><td><textarea id="newsContent'+n+'" name="newsContent'+n+'"></textarea></td></tr>');
								var tr6 = $('<tr class="newsMsg'+n+'"><td>消息URL：</td><td><input name="newsURL'+n+'" style="width: 875px"></td></tr>');
								$("#msgTable").append(tr1);
								$("#msgTable").append(tr2);
								$("#msgTable").append(tr3);
								$("#msgTable").append(tr4);
								$("#msgTable").append(tr5);
								$("#msgTable").append(tr6);
								$("#newsImage" + n).euploadify({
									width : 875,
									multiTemplate : 'simple',
									multi : true,
									auto : false,
									showStop : true,
									showCancel : true,
									'fileTypeExts' : '*.jpg',
									'queueSizeLimit' : 1,// 上传队列中所允许的文件数量
									'simUploadLimit' : 1,// 允许同时上传的文件数量
									swf : '${ctx }/static/uploadify/uploadify.swf',
									uploader : '${ctx }/basic/basicFile/upload',
									onUploadSuccess : function(file, data, response) {
										var obj = eval('(' + data + ')');
										$("#newsImageId" + n).val(obj.obj.id);
									}
								});
								$("#newsContent" + n).ueditor({

									height : 600,
									width : 877,
									value : '',
									template : 'full',
									codeMirrorJsUrl : false,
									codeMirrorCssUrl : false
								});

							}
						});
		$("#deleteOne").click(function() {
			if (m == 1 && n == 0) {
				showInfo("只剩最后一个图文信息不能删除");
				return false;
			}
			n--;
			m--;
			$(".newsMsg" + m).each(function() {
				$(this).remove();
			});
			$(".newsMsg" + n).show();
		});
	});
	function typeChange() {
		if ($("#msgType").combobox("getValue") == "" || $("#msgType").combobox("getValue") == "text") {
			$(".textMsg").show();
			$(".newsMsg0").hide();
			$(".voiceMsg").hide();
			$(".imageMsg").hide();
			$(".videoMsg").hide();
			$(".buttons").hide();
		} else if ($("#msgType").combobox("getValue") == "mpnews") {
			$(".textMsg").hide();
			$(".buttons").show();
			$(".newsMsg0").show();
			$(".voiceMsg").hide();
			$(".imageMsg").hide();
			$(".videoMsg").hide();
		} else if ($("#msgType").combobox("getValue") == "voice") {
			$(".textMsg").hide();
			$(".newsMsg0").hide();
			$(".voiceMsg").show();
			$(".imageMsg").hide();
			$(".videoMsg").hide();
			$(".buttons").hide();
		} else if ($("#msgType").combobox("getValue") == "image") {
			$(".textMsg").hide();
			$(".newsMsg0").hide();
			$(".voiceMsg").hide();
			$(".imageMsg").show();
			$(".videoMsg").hide();
			$(".buttons").hide();
		} else {
			$(".textMsg").hide();
			$(".newsMsg0").hide();
			$(".voiceMsg").hide();
			$(".imageMsg").hide();
			$(".videoMsg").show();
			$(".buttons").hide();
		}
	}
</script>
</head>
<body>
	<div data-options="region:'center',fit:true,border:false">
		<div class="easyui-panel" data-options="fit:true">
			<form id="fm" action="" method="post">
				<div id="tt" class="row" align="right">
					<div class="col-md-12">
						<button id="edit" type="button" class="btn btn-primary">
							<span class="glyphicon glyphicon-envelope"></span> 发送
						</button>
					</div>
				</div>
				<input type="hidden" id="usersId" name="usersId"> <input
					type="hidden" id="msgNumber" name="msgNumber">
				<table id="msgTable">
					<tr>
						<td>微信公共账号：</td>
						<td><input id="appId" name="appId"
							data-options="required: true" style="width: 875px"></td>
					</tr>
					<tr>
						<td>接收用户：<a id="wxUserSelector"
							class="easyui-linkbutton easyui-tooltip" title="选取微信分组用户"
							data-options="plain: true, iconCls: 'icon-hamburg-customers'"></a>
						</td>
						<td><input type="text" class="easyui-validatebox"
							id="usersName" data-options="required: true" readonly="readonly"
							style="width: 869px"></td>
					</tr>
					<tr>
						<td>消息类型：</td>
						<td><input id="msgType" name="msgType"
							data-options="required: true,onChange:typeChange"
							style="width: 875px" value="text"></td>
					</tr>
					<tr class="buttons">
						<td></td>
						<td><a id="beforeAll" class="easyui-linkbutton"
							data-options="plain: true, iconCls: 'icon-hamburg-left'">封面图文消息</a><a
							id="beforeOne" class="easyui-linkbutton"
							data-options="plain: true, iconCls: 'icon-hamburg-left'">上一图文消息</a>
							<a id="addOne" class="easyui-linkbutton"
							data-options="plain: true, iconCls: 'icon-standard-add'">新增图文消息</a><a
							id="deleteOne" class="easyui-linkbutton"
							data-options="plain: true, iconCls: 'icon-standard-delete'">删除尾页图文消息</a>
							<a id="behindOne" class="easyui-linkbutton"
							data-options="plain: true, iconCls: 'icon-hamburg-right'">下一图文消息</a><a
							id="behindAll" class="easyui-linkbutton"
							data-options="plain: true, iconCls: 'icon-hamburg-right'">尾页图文消息</a></td>
					</tr>
					<tr class="textMsg">
						<td>消息正文：</td>
						<td><textarea name="test" cols="122" rows="27"></textarea></td>
					</tr>
					<tr class="voiceMsg">
						<td>语音消息文件：</td>
						<td height="50px"><input id="voiceName" name="voiceName"
							type="text" /><input id="voiceNameId" name="voiceNameId"
							type="hidden" /></td>
					</tr>
					<tr class="imageMsg">
						<td>图片消息文件：</td>
						<td height="50px"><input id="imageName" name="imageName"
							type="text" /><input id="imageNameId" name="imageNameId"
							type="hidden" /></td>
					</tr>
					<tr class="videoMsg">
						<td>视频标题：</td>
						<td><input name="videoTitle" style="width: 875px"></td>
					</tr>
					<tr class="videoMsg">
						<td>视频内容：</td>
						<td><textarea name="videoDescription" cols="122" rows="10"></textarea></td>
					</tr>
					<tr class="videoMsg">
						<td>视频消息文件：</td>
						<td height="50px"><input id="videoName" name="videoName"
							type="text" /><input id="videoNameId" name="videoNameId"
							type="hidden" /></td>
					</tr>
					<tr class="newsMsg0">
						<td>封面标题：</td>
						<td><input id="newsTitle0" name="newsTitle0"
							style="width: 875px"></td>
					</tr>
					<tr class="newsMsg0">
						<td>消息作者：</td>
						<td><input name="newsEditor0" style="width: 875px"></td>
					</tr>
					<tr class="newsMsg0">
						<td>封面图片：</td>
						<td height="50px"><input id="newsImage0" name="newsImage0"
							type="text" /><input id="newsImageId0" name="newsImageId0"
							type="hidden" /></td>
					</tr>
					<tr class="newsMsg0">
						<td></td>
						<td height="50px"><input id="showCoverPic0"
							name="showCoverPic0" type="checkbox" /><label
							for="showCoverPic0">是否将封面显示与正文顶部</label></td>
					</tr>
					<tr class="newsMsg0">
						<td>消息内容：</td>
						<td><textarea id="newsContent0" name="newsContent0"
								class="easyui-ueditor"
								data-options="height: 600,width:877, value: '',template: 'full',codeMirrorJsUrl: false, codeMirrorCssUrl: false">
                              </textarea></td>
					</tr>
					<tr class="newsMsg0">
						<td>消息URL：</td>
						<td><input name="newsURL0" style="width: 875px"></td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</body>
</html>
